import React, { Component } from "react";
import { http } from "../../../api";
import { baseURL } from "../../../api/ajax";
import { Comment, Tooltip, Avatar, Form, Button, List, Input } from "antd";
import {
  DislikeOutlined,
  LikeOutlined,
  DislikeFilled,
  LikeFilled,
  StarFilled,
} from "@ant-design/icons";
import mobxdata from "../../../mobx/data";
import moment from "moment";
const { TextArea } = Input;
const CommentList = ({ comments }) => (
  <List
    dataSource={comments}
    header={`${comments.length} ${comments.length > 1 ? "replies" : "reply"}`}
    itemLayout="horizontal"
    renderItem={(props) => <Comment {...props} />}
  />
);

const Editor = ({ onChange, onSubmit, submitting, value }) => (
  <>
    <Form.Item>
      <TextArea rows={4} onChange={onChange} value={value} />
    </Form.Item>
    <Form.Item>
      <Button
        htmlType="submit"
        loading={submitting}
        onClick={onSubmit}
        type="primary"
      >
        发表评论
      </Button>
    </Form.Item>
  </>
);

export default class Expdetails extends Component {
  state = {
    detailList: null,
    comments: [],
    submitting: false,
    value: "",
    likes: 0,
    dislikes: 0,
    action: null,
    starCount: 0,
    collectCount: 0,
    starFlag: false,
    collectFlag: false,
    starArr: [],
    collectArr: [],
    heat: 0,
  };
  componentDidMount() {
    var urlId = this.props.location.search;
    urlId = urlId.split("=");
    var id = urlId[1];
    http
      .experiencelist({
        _id: id,
      })
      .then((res) => {
        if (res.data.code == 200) {
          var list = res.data.val[0];
          this.setState({
            detailList: list,
          });
          this.setState({
            starCount: this.state.detailList.star,
            collectCount: this.state.detailList.collect,
            heat: this.state.detailList.heat,
          });
          setTimeout(() => {
            http.userlist({ phone: localStorage.phone }).then((res) => {
              if (res.data.code == 200) {
                this.setState({
                  starArr: res.data.val.starArr,
                  collectArr: res.data.val.collectArr,
                });
                res.data.val.starArr.forEach((item, index) => {
                  if (this.state.detailList._id == item) {
                    this.setState({
                      starFlag: true,
                    });
                  }
                });
                res.data.val.collectArr.forEach((item, index) => {
                  if (this.state.detailList._id == item) {
                    this.setState({
                      collectFlag: true,
                    });
                  }
                });
              }
            });
          }, 500);
        }
      });
  }
  changeStar = () => {
    if (!this.state.starFlag) {
      this.setState({
        starFlag: !this.state.starFlag,
        starCount: ++this.state.starCount,
      });
      http.addstar({
        _id: this.state.detailList._id,
        heat: this.state.detailList.heat,
        phone: mobxdata.userinfo.phone,
        star: this.state.starCount,
      });
    } else {
      this.setState({
        starFlag: !this.state.starFlag,
        starCount: --this.state.starCount,
      });
      http.delstar({
        _id: this.state.detailList._id,
        heat: this.state.detailList.heat,
        phone: mobxdata.userinfo.phone,
        star: this.state.starCount,
      });
    }
  };
  changeCollect = () => {
    if (!this.state.collectFlag) {
      this.setState({
        collectFlag: !this.state.collectFlag,
        collectCount: ++this.state.collectCount,
      });
      http.addcollect({
        _id: this.state.detailList._id,
        heat: this.state.detailList.heat,
        phone: mobxdata.userinfo.phone,
        collect: this.state.collectCount,
      });
    } else {
      this.setState({
        collectFlag: !this.state.collectFlag,
        collectCount: --this.state.collectCount,
      });
      http.delcollect({
        _id: this.state.detailList._id,
        heat: this.state.detailList.heat,
        phone: mobxdata.userinfo.phone,
        collect: this.state.collectCount,
      });
    }
  };
  //发表评论方法
  handleSubmit = () => {
    if (!this.state.value) {
      return;
    }

    this.setState({
      submitting: true,
    });

    setTimeout(() => {
      this.setState({
        submitting: false,
        value: "",
        comments: [
          ...this.state.comments,
          {
            author: mobxdata.userinfo.username,
            avatar: mobxdata.userinfo.avatar.replace(/public/, baseURL),
            content: <p>{this.state.value}</p>,
            datetime: moment().fromNow(),
          },
        ],
      });
    }, 1000);
    // console.log(this.state.value);
  };

  handleChange = (e) => {
    this.setState({
      value: e.target.value,
    });
  };

  render() {
    const {
      detailList,
      starCount,
      collectCount,
      comments,
      submitting,
      collectFlag,
      value,
      starFlag,
      dislike,
      like,
      action,
      heat,
    } = this.state;
    return (
      detailList && (
        <div>
          <div style={{ marginBottom: 50 }}>
            <h2 style={{ fontSize: 20 }}>{detailList.title}</h2>
            <div style={{ height: 60, color: "gray" }}>
              <Avatar
                src={detailList.avatar.replace(/public/, baseURL)}
                size={48}
                style={{ float: "left", marginRight: 25 }}
              />
              <div style={{ float: "left", fontSize: 14 }}>
                <p style={{ marginBottom: 10 }}>{detailList.username}</p>
                <span style={{ fontSize: 10 }}>
                  编辑于
                  {moment(detailList.time).format("YYYY-MM-DD hh:mm:ss")}
                </span>
              </div>
              <div
                style={{
                  float: "right",
                  paddingTop: 30,
                  fontSize: 14,
                  color: "gray",
                }}
              >
                收藏 {collectCount} | 赞 {starCount} | 热度 {heat} |回复
                {detailList.comment.length}
              </div>
            </div>
            <hr />
            <p
              style={{ marginBottom: 40 }}
              dangerouslySetInnerHTML={{ __html: detailList.content }}
            ></p>
            {collectFlag ? (
              <Button
                type="text"
                style={{
                  background: "#25bb9b",
                  // marginLeft: 20,
                  marginRight: 5,
                  cursor: "pointer",
                  borderRadius: 5,
                }}
                onClick={() => {
                  this.changeCollect();
                }}
              >
                <StarFilled className="iconColor" />
                <span>{collectCount}</span>
              </Button>
            ) : (
              <Button
                type="text"
                style={{
                  background: "rgba(0,0,0,.05)",
                  marginRight: 5,
                  cursor: "pointer",
                  borderRadius: 5,
                }}
                className="changeIcon"
                onClick={() => {
                  this.changeCollect();
                }}
              >
                <StarFilled className="iconColor" />
                <span>{collectCount}</span>
              </Button>
            )}

            {/* button */}
            {starFlag ? (
              <Button
                type="text"
                style={{
                  background: "#25bb9b",
                  marginLeft: 20,
                  marginRight: 5,
                  cursor: "pointer",
                  borderRadius: 5,
                }}
                onClick={() => {
                  this.changeStar();
                }}
              >
                <LikeFilled className="iconColor" />
                <span>{starCount}</span>
              </Button>
            ) : (
              <Button
                type="text"
                style={{
                  marginLeft: 20,
                  borderRadius: 5,
                  marginRight: 5,
                  background: "rgba(0,0,0,.05)",
                  cursor: "pointer",
                }}
                className="changeIcon"
                onClick={() => {
                  this.changeStar();
                }}
              >
                <LikeFilled className="iconColor" />
                <span>{starCount}</span>
              </Button>
            )}
            <hr />
          </div>

          <div>
            {comments.length > 0 && <CommentList comments={comments} />}
            <Comment
              avatar={
                <Avatar
                  src={
                    mobxdata.userinfo &&
                    mobxdata.userinfo.avatar.replace(/public/, baseURL)
                  }
                  alt={mobxdata.userinfo && mobxdata.userinfo.username}
                />
              }
              content={
                <Editor
                  onChange={this.handleChange}
                  onSubmit={this.handleSubmit}
                  submitting={submitting}
                  value={value}
                />
              }
            />
          </div>
        </div>
      )
    );
  }
}
